<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			.div {
				width: 100%;
				padding: 50px 0;
				text-align: center;
			}
			
			button {
				width: 100px;
				height: 75px;
				background: #c1c1c1;
				color: black;
				font-size: 20px;
				cursor: pointer;
				margin-left: 20px;
			}
			
			.div7 div {
				width: 80%;
				height: 300px;
				line-height: 300px;
				background: skyblue;
				text-align: center;
				margin: 0 auto;
				transition: all .5s;
			}
			
			.div7 div {
				width: 80%;
				height: 0px;
				background: skyblue;
				text-align: center;
				margin: 0 auto;
				overflow: hidden;
				transition: all .5s;
				opacity: 0;
				transform-origin: top center;
			}
			
			.div7 div.active {
				height: 300px;
				line-height: 300px;
				opacity: 1;
			}
		</style>
	</head>

	<body>
		<div class="div div6">
			<input type="checkbox" />001
			<input type="checkbox" />002
			<input type="checkbox" />003
			<input type="checkbox" />004
			<input type="checkbox" />005
			<input type="checkbox" />006
			<br /><br />
			<button>全部选择</button>
			<button>全部取消</button>
			<button>全部反选</button>
		</div>

		<div class="div div7">
			<button>HTML</button>
			<button>JS</button>
			<button>JQ</button>
			<button>PHP</button>
			<br /><br />
			<div class="active">
				<p>HTML</p>
			</div>
			<div>
				<p>JS</p>
			</div>
			<div>
				<p>JQ</p>
			</div>
			<div>
				<p>PHP</p>
			</div>
		</div>

		<div class="div div9">
			<ul id="run">
				<li>第1段话</li>
				<li>第2段话</li>
				<li>第3段话</li>
				<li>第4段话</li>
				<li>第5段话</li>
			</ul>
		</div>

		<div class="div div10">
			<p id="test">javascript</p>
		</div>

		<script type="text/javascript">
			//1.请描述getComputedStyle和currentStyle的兼容性和区别,以及如何适配到IE5以上
			/*
			 * 兼容性:
			 * getComputedStyle支持IE8以上
			 * currentStyle支持IE5以上
			 * 写法区别:
			 * getComputedStyle(对象,伪对象)
			 * 对象.currentStyle
			 * 解决兼容性:
			 * function getStyle(obj){
			 * 	return (obj.currentStyle? obj.currentStyle : window.getComputedStyle(obj, null));
			 * }
			 */

			//2.请描述getComputedStyle和style的区别
			/*
			 * getComputedStyle只读,不能写入,返回的是最终属性,并且如果没有重写属性则拿去默认属性
			 * style是可读可写,永远拿取得是行内样式
			 */

			//3.请描述document.querySelector*()和document.getElementBy*()的区别及兼容性
			/*
			 * 兼容性:
			 * document.querySelector*()兼容IE7以上
			 * document.getElementBy*()兼容IE8以上
			 * 区别:
			 * document.querySelector*()获取的元素及元素数组是静态的
			 * document.getElementBy*()获取的元素是动态的
			 * 静态的就是说选出的所有元素的数组，不会随着文档操作而改变
			 * 在使用的时候document.getElementBy*()性能比较好，document.querySelector*()比较方便．
			 */

			//4.将下面地址(address)放到浏览器后，将参数和对应的值放入json里面输出
			var address = "http://127.0.0.1:8020/新作业/10-JS第十堂课-classList/答案.html?contact_state=1&visit_state=1&intention_id=2&search_date=2017-05-02&staff_id=401";
			var str = location.search.slice(1);
			var new_str = str.split("&");
			var now_request = new Object();
			for(var i = 0; i < new_str.length; i++) {
				now_request[new_str[i].split("=")[0]] = (new_str[i].split("=")[1]);
			}
			console.log(now_request);

			//5.DOM操作——怎样添加、移除、移动、复制、创建和查找节点
			/*
			 * 添加
			 * createDocumentFragment()       创建一个DOM片段
			 * createElement()                创建一个具体的元素
			 * createTextNode()               创建一个文本节点
			 * 增删改
			 * appendChild()
			 * removeChild()
			 * replaceChild()
			 * insertBefore()
			 * 查找节点
			 * getElementsByTagName()         通过标签名称
			 * getElementsByName()            通过元素的Name属性的值(IE容错能力较强，会得到一个数组，其中包括id等于name值的)
			 * getElementById()               通过元素Id，唯一性
			 * querySelector() 
			 * querySelectorAll() 
			 */

			//6.实现div6里面三个按钮的功能
			//						var btn1 = document.querySelector(".div6 button:first-of-type");
			//						var btn2 = document.querySelector(".div6 button:nth-of-type(2)");
			//						var btn3 = document.querySelector(".div6 button:last-of-type");
			//						var inps = document.querySelectorAll(".div6 input");
			//						btn1.addEventListener("click",function(){
			//							for(k in inps){
			//								inps[k].checked = true;
			//							}
			//						})
			//						btn2.addEventListener("click",function(){
			//							for(k in inps){
			//								inps[k].checked = false;
			//							}
			//						})
			//						btn3.addEventListener("click",function(){
			//							for(k in inps){
			//								inps[k].checked = !inps[k].checked;
			//							}
			//						})

			//7.选项卡切换,点击四个不同的按钮使对应的内容块渐显出来(有过渡动画)
			//						var btn1 = document.querySelector(".div7 button:first-of-type");
			//						var btn2 = document.querySelector(".div7 button:nth-of-type(2)");
			//						var btn3 = document.querySelector(".div7 button:nth-of-type(3)");
			//						var btn4 = document.querySelector(".div7 button:last-of-type");
			//						var all_div = document.querySelectorAll(".div7 div");
			//						btn1.addEventListener("click", function() {
			//							show_div(0);
			//						})
			//						btn2.addEventListener("click", function() {
			//							show_div(1);
			//						})
			//						btn3.addEventListener("click", function() {
			//							show_div(2);
			//						})
			//						btn4.addEventListener("click", function() {
			//							show_div(3);
			//						})
			//			
			//						function show_div(num) {
			//							for(var i = 0; i < all_div.length; i++) {
			//								all_div[i].classList.contains("active") ? all_div[i].classList.remove("active") : "";
			//							}
			//							setTimeout(function() {
			//								all_div[num].classList.add("active");
			//							}, 500)
			//						}

			//			

			//8.识别用户当前所用的是什么浏览器
//			var browerinfo = window.navigator.userAgent; //浏览器的用户代理信息
//			if(browerinfo.indexOf('Chrome') >= 0) {
//				alert('您当前使用的是谷歌浏览器');
//			} else if(browerinfo.indexOf('Firefox') >= 0) {
//				alert('您当前使用的是火狐浏览器');
//			} else if(browerinfo.indexOf('MSIE 10.0') >= 0) {
//				alert('您当前使用的是IE10浏览器');
//			} else if(browerinfo.indexOf('MSIE 9.0') >= 0) {
//				alert('您当前使用的是IE9浏览器');
//			} else if(browerinfo.indexOf('MSIE 8.0') >= 0) {
//				alert('您当前使用的是IE8浏览器');
//			}

			//9.请实现第九题题目.gif的效果
			//			var obj = document.getElementById('run');
			//			setInterval(function() {
			//				var f = obj.children[0]; //每次都获取最新的第一个子元素
			//				obj.removeChild(f); //先移除这个元素
			//				obj.appendChild(f); //再追加这个元素
			//			}, 300);

			//10.请实现第十题题目.gif的效果
						var smail = 10;
						var biger = 70;
						var test = document.getElementById("test");
			
						function test1() {
							test.style.fontSize = smail + "px";
							smail++;
							if(smail == 70) {
								smail = 10;
								clearInterval(t1);
								t2 = setInterval(test2, 50);
							}
						}
			
						function test2() {
							test.style.fontSize = biger + "px";
							biger--;
							if(biger == 10) {
								biger = 70;
								clearInterval(t2);
								t1 = setInterval(test1, 50);
							}
			
						}
						var t1 = setInterval(test1, 50),
							t2;
		</script>
	</body>

</html>